import React, { Component } from "react";
import { login } from '../../redux/actions'
import connect from 'react-redux/es/connect/connect'
// import { register } from '../../redux/actions'
import { Redirect } from 'react-router-dom'


// 引入antd组件
import {

  NavBar,
  WingBlank,
  WhiteSpace,
  List,
  InputItem,
  // Radio,
  Button, Icon,
} from 'antd-mobile'
import Logo from "../../components/Logo/Logo";

// import "./Register.styl";
// 获取List组件中的表单控件
// const ListItem = List.Item;
// const RadioItem = Radio.RadioItem;
 class Login extends Component {
  // 定义初始值
  state = {
    username: "",
    password: "",
  };
  render() {
    // 表单输入完整性验证 有一项没有输入就disabled不能提交
    let { username, password} = this.state
    let disabledSub = true
    if (username && password ) {
      disabledSub = false
    }
    let {code, msg, redirectTo,reg} = this.props.user.data
    // console.log(this.props.user.data)
    if (redirectTo && reg) {
      console.log(redirectTo)
      //  如有redirectTo有值那么重定向到这个值的路由
      return <Redirect to={redirectTo}/>

    } else {
      // let { userType } = this.state;
      return (
        <div className="register-warp">
          <NavBar className="navbar">BOSS直聘</NavBar>
          <Logo />
          {/* 两侧留白组件 */}
          <WingBlank>
            <List renderHeader={() => "登录"}>
              {msg && !this.props.user.data.username
                ? <div
                  className={code === 0 ? 'success-msg' : 'error-msg'}>        <Icon type="cross-circle-o" />{msg}</div>
                : null}
              <WhiteSpace />
          
              <InputItem
                onChange={value => this.handlerChange("username", value)}
                placeholder='输入用户名'
              >
                用户名
              </InputItem>
              <WhiteSpace />
              <InputItem
                placeholder='输入密码'
                type="password"
                onChange={value => this.handlerChange("password", value)}
              >
                密&nbsp;&nbsp;&nbsp;码
              </InputItem>
              <WhiteSpace />
          
              <Button type="primary"
                      disabled={disabledSub}
                      onClick={() => this.login()}>
                登录
              </Button>
              <WhiteSpace />
              <Button type="ghost"  onClick={this.toRegister}>
                没有账号
              </Button>
              <WhiteSpace />
            </List>
          </WingBlank>
        </div>
      )
    }
    
    
  }
  // 输入或选择 改变stata信息
  handlerChange(name, value) {
    // console.log(name, value);
    // 拿到值后改变 []语法用来动态改变对象的key，中括号功能强大，可以是变量 那么key就是变量的值
    this.setState({
      [name]: value
    });
  }
  // 注册提交函数
  login() {
    // 解构stata 收集state信息
    // let { username, password } = this.state;
    // console.log(this.state);
    this.props.login(this.state)
  }
// 跳转登录页面的函数
toRegister = ()=> {
    console.log('跳转');
      this.props.history.replace('/register')
  }
}


export default connect(
//   返回映射state
  state => ({user: state.user}),
  //  注入action 组件可以从this.props中得到action函数
  {login},
)(Login)